Vue.component("myhead",{
    template:`
        <div >
        <a href="index.html"><el-image style="width:250px;float: left" :src="imgUrl"></el-image></a>
        <span style="line-height:74px; text-align: center;font-size: 40px ;float: left">{{title}}</span>
         <el-menu mode="horizontal" style="float: left;height: 74px;margin: 0 150px;">
          <el-menu-item index="1" style="background-color: white"><el-link :underline="false" href="index.html" style="font-size: 30px">首页</el-link></el-menu-item>
          <el-menu-item index="2" style="background-color: white"><el-link :underline="false" href="watch.html" style="font-size: 30px">观看</el-link></el-menu-item>
          <el-menu-item index="3" style="background-color: white"><el-link :underline="false" href="buyticks.html" style="font-size: 30px">购票</el-link></el-menu-item>
          <el-menu-item index="4" style="background-color: white"><el-link :underline="false" href="sendmail.html" style="font-size: 30px">反馈</el-link></el-menu-item>
         </el-menu>
         <div style="float: right;padding-right: 50px">
         <el-input placeholder="请输入内容" suffix-icon="el-icon-search" style="width:200px;" ></el-input>
         <el-dropdown style="padding-left: 20px;">
            <el-avatar :src="userMsg.image" style="position: relative;top: 10px"></el-avatar>
<!--           <span style="position: relative;top: -5px;height: 74px;text-align: center;">{{userName}}</span>-->
          <el-dropdown-menu slot="dropdown" style="margin-top: 20px" v-if="userMsg.userid===''">
            <el-dropdown-item><el-link href="userlogin.html">登录/注册</el-link></el-dropdown-item>
          </el-dropdown-menu>
          <el-dropdown-menu slot="dropdown" style="margin-top: 20px" v-else>
            <div style="padding-left: 10px;font-size: 14px"><label>用户 : </label><span style="font-size: 14px;color: #666666  ">{{userMsg.username}}</span></div>
            <div style="padding-left: 10px;font-size: 12px"><label>余额 : </label><span style="font-size: 12px;color: #666666 ;color: red ">{{userMsg.money}}</span></div>
            <el-dropdown-item ><el-link href="userinformation.html" target="_blank" >个人信息</el-link></el-dropdown-item>
            <el-dropdown-item><el-link @click="exit">退出登录</el-link></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        </div>
        </div>

      `,
    //定义组件属性，同样不能用驼峰命名法，数组或对象
    //vue的组件属性是只读的
    // props:["img-url","title","user-name","user-img","user-msg"],
    props:{
        imgUrl:String,
        title:String,
        userMsg:{},
    },
    methods:{
        exit(){
            axios.get("ExitServlet").then(res=>{
                if (res.data.code===1){
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.userMsg={userid:""};
                }else {
                    this.$message.error(res.data.msg);
                }
            });
            this.$forceUpdate();
        },
    }

})
